<template>
  <div style="background-color: white;">
    <swiper :options="swiperOptions" ref="mySwiper">
      <swiper-slide v-for="(item, index) in items" :key="index" style="width: 25%;">
        <div>
          <img :src="'https://fuss10.elemecdn.com'+(item.image_url)" alt="" style="width: 50px;">
          <div :class="selectIndex == index ? 'select' : 'normal'" @click="clickAction(index)" style="font-size: 14px;">{{item.title}}</div>
        </div>       
      </swiper-slide>
      <!-- // 显示分页器，类名可以自定义， slot固定，可选 -->
      <div class="swiper-pagination" slot="pagination" v-if="page"></div>
      <!-- // 显示切换按钮，类名可以自定义，slot固定，可选 -->
      <!-- <div class="swiper-button-prev" slot="button-prev" v-if="changeButton"></div>
      <div class="swiper-button-next" slot="button-next" v-if="changeButton"></div> -->
      <!-- // 显示滚动条，类名自定义，slot固定，可选 -->
      <!-- <div class="swiper-scrollbar" slot="scrollbar" v-if="scrollBar"></div> -->
    </swiper>
  </div>
</template>
<script>
  export default {
    name: "SwiperComponent",
    data() {
      let defaultOptions = {
        loop: true, // 前后衔接循环
        navigation: { // 绑定按钮，否则按钮不生效
          prevEl: '.swiper-button-prev',
          nextEl: '.swiper-button-next'
        },
        pagination: { // 绑定分页器，否则分页器不显示
          el: '.swiper-pagination',
          type: 'progressbar' // 将分页器显示为进度条，可选配置项
        },
        scrollbar: { // 绑定滚动条，否则滚动条不生效
          el: '.swiper-scrollbar',
          hide: true // 自定隐藏滚动条，可选配置项
        }
      };
      return {
        swiperOptions: this.option ? this.option : defaultOptions,
        selectIndex: 0,
      }
    },
    props: {
      items: {
        type: Array,
        default: function () {
          return []
        }
      },
      page: {
        type: Boolean,
        default: true
      },
      changeButton: {
        type: Boolean,
        default: false
      },
      scrollBar: {
        type: Boolean,
        default: true
      },
      option: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      clickAction(index) {
        this.selectIndex = index;      
      },
    }
  }
</script>
<style scoped lang="less">
  button {
    border: none;
    background-color: transparent;
  }

  .select {
    color: red;
  }

  .normal {
    color: #555555;
  }
  .swiper-slide {
    margin-top: 10px;
    margin-bottom: 20px;
}
</style>